
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="选择小区:">
            <el-select
              v-model="filters.CID"
              filterable
              placeholder="请选择"
              clearable
              @change="refreshPageRequest(1)"
            >
              <el-option
                v-for="item in villageList"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input
              placeholder="请输入"
              clearable
              v-model="filters.name"
              @change="refreshPageRequest(1)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery()">查询</el-button>
            <el-button type="primary" @click="addBusiness"    v-show="hasPerm('commadmin:grid:add')">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容区域 -->
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          
          <el-table-column prop="name" label="网格名称" align="center">
             <template slot-scope="scope">
              <span>{{ scope.row.name}}网格</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="办公地址" align="center">
          </el-table-column>
          <el-table-column prop="total" label="总户数" align="center">
             <template slot-scope="scope">
              <span>{{ scope.row.total }}户</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="300"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="editRow(scope.row)"
                v-show="hasPerm('commadmin:grid:edit')"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                v-show="hasPerm('commadmin:grid:remove')"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部区域 -->
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <div v-if="addVisible">
      <el-dialog
        class="dialog-container"
        :title="title"
        :visible.sync="addVisible"
        :modal-append-to-body="false"
        :destroy-on-close="true"
        @close="closeEdit"
      >
        <addvote
          :data="dataForm"
          @handleSave="handleSave"
          @closeEdit="closeEdit"
          @clickCancel="handleCancel"
        ></addvote>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import addvote from "./addvote";
export default {
  components: {
    addvote,
  },
  data() {
    return {
      loading: true,
      // 弹框
      tableData: [],
      asideShow: false,
      pageResult: [],
      filters: {
        auditType: 2,
      },
      pageRequest: {
        page: 1,
        limit: 10,
      },
      // 小区列表
      villageList: [],
      loading: false,
      totalSize: 0,
      addVisible: false,
      editVisible: false,
      dictList: {},
      auditType: 1,
      auditTypeArr: [
       
      ],
      dataForm: {},
      title: "新增",
    };
  },
  async mounted() {
    this.filters.CID = localStorage.getItem("home_CID");
    this.getCommunityList();
    this.dictList = JSON.parse(sessionStorage.getItem("dictData"));
    this.handleQuery();
    this.organizeMix = await this.getOrganizeMix();
  },
  methods: {
    handleSave: function () {
      this.editVisible = false;
      this.addVisible = false;
      // this.handleQuery();
    },
    getDetail(row) {
      this.editVisible = true;
      this.dataForm = row;
    },
    editRow(row) {
      this.dataForm = row;
      this.title = "编辑";
      this.addVisible = true;
    },
    addBusiness() {
      this.dataForm = {};
      this.title = "新增";
      this.addVisible = true;
    },
    //删除
    handleDelete(row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning",
      }).then(() => {
        let params = {
          VIDS: [],
        };
        params.VIDS.push(row.VID);

        this.$api.wxNotic.volunteer_remove(params).then((res) => {
          this.editLoading = false;
          if (res.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.handleQuery();
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error",
            });
          }
        });
      });
    },
    updateOne(e) {
      let param = e;
      this.$api.wxNotic.volunteer_audit(param).then((res) => {
        this.loading = false;
        this.handleQuery();
      });
    },
    // 小区查询
    getCommunityList() {
      this.villageList = this.$store.state.village.villageList;
    },
    // 查询列表
    handleQuery() {
      let param = {
        page: this.pageRequest.page,
        limit: this.pageRequest.limit,
      };
      // let params = Object.assign(param, this.filters);
      // let paramJson = JSON.stringify(params);
      this.loading = true;
      this.$api.suggestion.gridlist(param).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.pageResult = res.data;
          this.totalSize = res.count;
          this.pageResult.map((item) => {
            item.names = this.formatName(item.name);
            this.villageList.map((val) => {
              if (item.CID == val.CID) {
                item.CIDD = val.name;
              }
            });
          });
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "avatar/" + id;
      return url;
    },
    //名字脱敏
    formatName(name) {
      var newStr;
      if (name.length === 2) {
        newStr = name.substr(0, 1) + "*";
      } else if (name.length > 2) {
        var char = "";
        for (var i = 0, len = name.length - 2; i < len; i++) {
          char += "*";
        }
        newStr = name.substr(0, 1) + char + name.substr(-1, 1);
      } else {
        newStr = name;
      }
      return newStr;
    },
    // 翻页
    refreshPageRequest(val) {
      this.pageRequest.page = val;
      this.handleQuery();
    },

    /* 保存成功关闭编辑弹窗 */
    closeEdit: function () {
      this.addVisible = false;
    },
    /* 取消编辑 */
    handleCancel: function () {
      this.addVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 250px;
}
.mt20 {
  margin-top: 20px;
}
</style>
